// 1.1 获取裁剪区域的 DOM 元素
let $image = $(".container img");
// 1.2 配置选项
let options = {
  // 纵横比
  aspectRatio: 1,
  // 指定预览区域
  preview: ".preview",
};
// 1.3 创建裁剪区域
$image.cropper(options);

//    todo =======点击选择图片，按钮触发
$("#btnChooseImage").on("click", function () {
  // 模拟点击,文件选择框
  $("#file").click();
});
//  todo ==========更改裁剪图片
$("#file").on("change", function () {
  // 用户选择文件（图片）==> this.files[0]
  const file = this.files[0];
  console.log(file);

  //   判断是否选择 文件（图片）
  if (!file) {
    // 未选择图片
    return;
  }
  //   反之，选择图片，执行以下代码

  // 将选择的图片转 url地址
  const imgSrc = URL.createObjectURL(file);
  console.log(imgSrc);

  //     更换剪裁区的图片
  // - 先销毁原来的剪裁区
  // - 更改图片的src属性重新设置图片路径
  // - 重新生成剪裁区创建新的裁剪区域
  $image
    .cropper("destroy") // 销毁旧的裁剪区域
    .attr("src", imgSrc) // 重新设置图片路径
    .cropper(options); // 重新初始化裁剪区域
});
// todo ========上传新头像
// 点击 确定 的时候，剪裁图片，转成base64格式，提交字符串到接口
$("#btnCreateAvatar").click(function () {
  // 剪裁得到一张图片（canvas图片）
  let base64Str = $image.cropper("getCroppedCanvas", {
    // 创建一个 Canvas 画布
    width: 100,
    height: 100,
  });
  // 把图片转成base64格式
  // 把canvas图片转成base64格式的字符串
  let dataURL = base64Str.toDataURL("image/png");
  //   console.log(dataURL);

  //   发送axios请求
  //    { avatar: dataURL } ,是json数据，不是后端所需要
  //   encodeURL; encodeURIComponent；编码处理
  axios
    .post("/my/update/avatar", "avatar=" + encodeURIComponent(dataURL))
    .then(({ data }) => {
      //   console.log(data);
      if (data.status !== 0) {
        // 图片上传失败
        return layer.msg(data.message);
      }
      // 图片上传成功
      layer.msg(data.message);
    //  window.parent 调用父页面的 getUserInfo()函数，渲染获取用户数据
    window.parent.getUserInfo();
    });
});
